<script setup>
import moment from 'moment'
import * as API from '@/api'
import { reactive, onMounted, computed } from 'vue'
import Form from './components/Form.vue'
import Store from '@/utils/storage'

const state = reactive({
  queryForm: {
    applyState: 1
  },
  applyList: [],
  page: {
    pageNum: 1,
    pageSize: 10,
    total: 0,
  },
  isShowDialog: false,
  deptItem: {}
})

onMounted(() => {
  getApplyList()
})

const columns = [
  { label: '单号', prop: 'orderNo' },
  { label: '申请人', prop: 'applyUser', 
  formatter: (row) => {
    return row.applyUser.userName
  } },
  { label: '休假时间', prop: '', formatter: (row) => { 
    const start = moment(row.startTime).format('YYYY-MM-DD')
    const end = moment(row.endTime).format('YYYY-MM-DD')
    return `${start} 到 ${end}`
  } },
  { label: '休假时长', prop: 'leaveTime' },
  { label: '休假类型', prop: 'applyType', formatter(row) {
    const map = {
      1: '事假',
      2: '调休',
      3: '年假',
    }
    return map[row.applyType]
  } },
  { label: '休假原因', prop: 'reasons' },
  { label: '申请时间', prop: 'createTime', formatter(row) {
    return moment(row.createTime).format('YYYY-MM-DD')
  } },
  { label: '审批人', prop: 'auditUsers' },
  { label: '当前审批人', prop: 'curAuditUserName' },
  { label: '审批状态', prop: 'applyState', formatter: (row) => {
    const map = {
      1: '待审批',
      2: '审批中',
      3: '审批拒绝',
      4: '审批通过',
      5: '作废',
    }
    return map[row.applyState]
  } },
]

const getApplyList = async () => {
  let { list, page } = await API.getApplyList({
    ...state.queryForm,
    type: 'approve',
    ...state.page
  })
  state.applyList = list
  state.page = page
}

const handelCurrentChange = (currentPage) => {
  state.page.pageNum = currentPage
  getApplyList()
}

const openApprove = (item) => {
  state.isShowDialog = true;
  state.deptItem = item;
  getApplyList()
}

const handelClosed = () => {
  state.isShowDialog = false;
  getApplyList()
}

const userName = computed(() => {
  return Store.getItem('userInfo').userName
})

</script>
<template>
  
  <div class="leave-manger">
    <div class="query-form">
      
      <el-form ref="queryForm" :inline="true" :model="state.queryForm" >
        <el-form-item label="审批状态" prop="applyState">
          <el-select v-model="state.queryForm.applyState">
            <el-option value="" label="全部" ></el-option>
            <el-option :value="1" label="待审批" ></el-option>
            <el-option :value="2" label="审批中" ></el-option>
            <el-option :value="3" label="审批拒绝" ></el-option>
            <el-option :value="4" label="审批通过" ></el-option>
            <el-option :value="5" label="作废" ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button @click="getApplyList" type="primary">查询</el-button>
        </el-form-item>
      </el-form>

    </div>
    
    <div class="base-table">
      <el-table :data="state.applyList" >
        <el-table-column
          v-for="item of columns"
          :key="item.prop"
          :prop="item.prop"
          :label="item.label"
          :width="item.width"
          :formatter="item.formatter"
        >
        </el-table-column>
        <el-table-column width="150">
          <template #default="scope">
            <el-button v-if="scope.row.curAuditUserName === userName"  @click="openApprove(scope.row)" >审核</el-button>
          </template>
        </el-table-column>
      </el-table> 
      <el-pagination @current-change="handelCurrentChange" class="pagination" background layout="prev, pager, next"
        :page-size="state.page.pageSize" :total="state.page.total" />

    </div>
    <Form @closed="handelClosed" :deptItem="state.deptItem" :isShowDialog="state.isShowDialog" />
  </div>
</template>